<template>
    <div class="main_container">
        <Modal v-model="active" title="创建权限" @on-ok="handleSubmit">
            <Form v-model="changeData" :label-width="120" :label-colon="true">
                <FormItem label="权限名">
                    <Input v-model="changeData.name" />
                </FormItem>
                <FormItem label="标题">
                    <Input v-model="changeData.title" />
                </FormItem>
                <FormItem label="对应url">
                    <Input v-model="changeData.url" />
                </FormItem>
                <FormItem label="图标">
                    <Input v-model="changeData.iconUrl" /> <br>
                    <Icon :type="changeData.iconUrl" size="60" /> <br>
                    仅支持vue-ui-plus的Icon组件
                    <a href="https://www.iviewui.com/view-ui-plus/component/base/icon">想要了解更多请点击查看</a>
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Col span="4" offset="18" class-name="button_container">
            <Button type="success" shape="circle" size="large" style="width: 200px;" 
            @click="handleCreate">新建权限</Button>
            </Col>
        </Row>
        <Divider></Divider>
        <List class="list_container">
            <ListItem v-for="perm in permData">
                <ListItemMeta :title="perm.title" :description="'name: ' + perm.name + '  &emsp;url: ' + perm.url" />
                <Space>
                    <Icon :type="perm.iconUrl"></Icon>
                    对应标题: {{ perm.title }}
                </Space>
                <template #action>
                    <Space>
                        <Button type="primary" style="width: 100px;" shape="circle" 
                        @click="handleUpdate(perm)">修改</Button>
                        <Button type="error" style="width: 100px;" shape="circle"
                        @click="handleDelete(perm.id)">
                            删除</Button>
                    </Space>
                </template>
            </ListItem>
        </List>
    </div>
</template>
<script>
import { Avatar, Divider, List, ListItem } from 'view-ui-plus';

export default {
    name: "Permission",
    data() {
        return {
            permData: {},
            changeData: {},
            active: false,
            isCreate:false,
        };
    },
    methods: {
        handleCreate() {
            this.active = true;
            this.isCreate = true;
            this.changeData = {};
        },
        handleUpdate(perm) {
            this.active = true;
            this.isCreate = false;
            this.changeData = perm;
        },
        handleDelete(id) {
            this.confirm(() => {
                this.$api.post("admin/role/delete/" + id).then((res) => {
                    this.info(res.msg);
                    this.renew();
                })
            })
        },
        handleSubmit() {
            this.confirm(() => {
                var url = this.isCreate ? "admin/perm/create" : "admin/perm/update";
                this.$api.post(url, this.changeData).then((res) => {
                    this.info(res.msg);
                    this.renew();
                });
            })
        },
        confirm(func) {
            this.$Modal.confirm({
                title: "确认框",
                onOk: func,
            });
        },
        info(message) {
            this.$Notice.info({
                title: "提示",
                desc: message,
            });
        },
        renew() {
            this.$api.get("admin/perm/list").then((res) => {
                this.permData = res.data.data;
            });
        },
    },
    created() {
        this.renew();
    },
    components: { List, ListItem, Divider, Avatar }
}
</script>
<style scoped>
.main_container {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}
.list_container{
    height: 400px;
    overflow: auto;
}
</style>